<template>
    <view v-if="list.length">
        <view class="container list mar-t-10 border-b-1 pad-b-10" v-for="(item,index) in list" :key="index">
            <view class="list-item">
                <view class="flex">
                    <view class="pj-user-avator">
                        <image :src="item.user.avatar"></image>
                    </view>
                    <view class="flex-1 mar-l-10">
                        <view class="pj-user-name ">
                            <text class="font-color-normal font-size-15" >{{item.anonymous == 'no'?(item.user.nickname||'匿名'):'匿名'}}</text>
                        </view>
                        <view class="mar-t-15">
                            <text class="font-color-444 font-size-16">{{item.content}}</text>
                        </view>
                        <view class="font-size-12 mar-t-15">
                            <text class="font-color-A7AABB">{{getDateYMDHMS(item.create_time)}} </text>
                            <!-- <text class="mar-l-5 font-color-999">|</text> <text class="mar-l-5 font-color-999" @click="reply(index)">回复TA</text></view> -->
                        </view>
                    </view>
                    <view class="flex align-end">
                        <view class="flex align-center" @click="like(index)">
							<text class="iconfont font-size-18"  :class="item.is_like == true?'icon-love-active font-color-orange':'icon-love font-color-999'"></text>
                            <!-- <mk-icon :src="item.is_like == true? :height="24" :width="24" ></mk-icon> -->
                            <text class="text-middle font-size-13 mar-l-3 font-color-999">{{item.likes_num}}</text> 
                        </view>
						<view class="flex align-center mar-l-10" @click="reply(index)">
							<text class="iconfont icon-reply font-color-999 font-size-18"></text>
							<!-- <text class="text-middle font-size-13 mar-l-3 font-color-999">{{item.comments_num}}</text> -->
						</view>
                    </view>
                </view>
            </view>
            <!-- 子评论 -->
            <view class="child mar-t-15 pad-l-8" v-if="item.child && item.child.total>0">
                <view class="child-comments flex-1 pad-10" v-for="(child,cindex) in item.child.data" :key="cindex">
                    <view class="flex align-center ">
                        <image class="child-user-avatar" :src="child.user.avatar" mode="scaleToFill"></image>
                        <view class="flex-1 mar-l-5 font-color-666 font-fa-me font-500 flex align-center font-size-14">
                            <text>{{child.user.nickname}}</text>
                            <mk-icon :src="''"></mk-icon>
                            <text>{{child.parent.user.nickname}}</text>
                        </view>
                        
						<!-- <text class="mar-l-5" @click="reply(index,cindex)">回复TA</text> -->
                    </view>
                    <view class="child-content mar-t-5 font-size-16 font-color-444">
                        {{child.content}}
                    </view>
                    <view class="child-content mar-t-5 font-color-999 font-size-12 flex align-center justify-between">
                        <text class="">{{getDateYMDHMS(child.create_time)}} </text> 
                        <!-- <text class="mar-l-5">|</text> 
                        <text class="mar-l-5" @click="reply(index,cindex)">回复TA</text> -->
						<view class="flex align-end">
							<view @click="like(index,cindex)" class="font-color-666 flex align-center">
							    <text class="iconfont font-size-18" :class="child.is_like == true?'icon-love-active font-color-orange':'icon-love font-color-999'"></text>
							    <text class="text-middle font-color-999 font-size-13">{{child.likes_num}}</text> 
							</view>
							<view class="flex align-center mar-l-10" @click="reply(index,cindex)">
								<text class="iconfont icon-reply font-color-999 font-size-18"></text>
								<!-- <text class="text-middle font-size-13 mar-l-3 font-color-999">{{child.comments_num}}</text> -->
							</view>
						</view>
                    </view>
                </view>
                
            </view>
            <!-- 子评论结束 -->
            <view class="font-color-A7AABB mar-l-40 mar-t-10 pad-l-5 font-size-13"  v-if="item.child.last_page > item.child.current_page" @click="morecomments(index)">查看更多</view>
        </view>
    </view>
</template>

<script>
import {likeCancel,likeCreate,commentsList,serverTimeStamp} from '@/utils/http'
export default {
    props:['list'],
    data() {
        return {
            timestamp:'',
        }
    },
    methods: {
        reply(index,cindex){
            this.$emit('update:current_comment_index', index)
            this.$emit('reply',cindex)
        },
        //点赞
        like(index,cindex){
			console.log('cindex',cindex)
            //总评论
            let current_comments = this.list[index];
            if(typeof cindex != 'undefined'){
				console.log('子评论')
                  //子评论
                let child_comment = current_comments.child.data[cindex];
                if(child_comment.is_like == true){
                    this.likeCancel(child_comment.id,'comments',index,cindex);
					current_comments.child.data[cindex].is_like = false
					current_comments.child.data[cindex].likes_num--
                    // child_comment.is_like = false 
                    // child_comment.likes_num--
                }else{
                    this.likeCreate(child_comment.id,'comments',index,cindex)
					current_comments.child.data[cindex].is_like = true
					current_comments.child.data[cindex].likes_num++
                    // child_comment.is_like = true 
                    // child_comment.likes_num++
                }
            }else{
               if(current_comments.is_like == true){
                    this.likeCancel(current_comments.id,'comments',index);
                    current_comments.is_like = false
                    current_comments.likes_num--;
                }else{
                    this.likeCreate(current_comments.id,'comments',index)
                    current_comments.is_like = true 
                    current_comments.likes_num++
                }
            }
            // if( this.list[index].is_like == true){
            //     this.likeCancel(this.list[index].id,'comments',index);
            // }else{
            //     this.likeCreate(this.list[index].id,'comments',index);
            // }
        },
        likeCreate(liketable_id,liketable_type,index){
             likeCreate({liketable_id,liketable_type}).then(res=>{
                if(res){
                    // this.list[index].is_like  = true
                    // this.list[index].likes_num++
                    
                }
            })
        },
        likeCancel(liketable_id,liketable_type,index){
             likeCancel({liketable_id,liketable_type}).then(res=>{
                if(res){
                    // this.list[index].is_like  = false
                    // this.list[index].likes_num--
                }
            })
        },
        //加载更多
        morecomments(index){
            let current_comments = this.list[index];
            let child_comments = this.list[index].child;
             let page = child_comments.per_page == 1 ? child_comments.current_page:child_comments.current_page + 1
            commentsList({type:'comments',pid:current_comments.id,page:page,timestamp:this.timestamp  }).then(res=>{
                console.log(this.list[index]);
                if(res.current_page == 1){
                    this.list[index].child = res;
                }else{
                    child_comments.current_page = res.current_page
                    child_comments.per_page = res.per_page
                    child_comments.last_page = res.last_page
                    this.list[index].child.data = [...child_comments.data,...res.data]
                }
               
                // console.log(res);
                // console.log(this.list[index].child);
                // this.list[index].child = res
                // console.log(this.list[index].child);
                //   if(res){
                //         if(res.current_page == 1){
                //             this.list[index].child = res
                //         }
                //     }
            })
        },
        serverTimeStamp(){
            serverTimeStamp().then(res=>{
                this.timestamp = res;
            })
        }
    },
    
}
</script>

<style scoped>
.pj-user-avator {
    /* background-color: #cccccc; */
    height:70rpx;
    width: 70rpx;
}
.pj-user-avator image{
    height:70rpx;
    width: 70rpx;
    border-radius: 100%;
}

.child-comments{
    background-color: #FAFAFA;
    /* padding-left: 10px; */
    margin-left: 35px;
    padding-bottom: 10px;
}
.child-comments .child-user-avatar{
    height: 50rpx;
    width: 50rpx;
    background-color: #ccc;
    border-radius: 100%;
}
.child-content{
    /* margin-left: 20px; */
}
</style>